<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>全选反选练习</title>
</head>

<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
</form>
</body>
<script>
    let checkedAllBox = document.querySelector("#checkedAllBox");
    let checkedAllBtn = document.querySelector("#checkedAllBtn");
    let checkedNoBtn = document.querySelector("#checkedNoBtn");
    let checkedRevBtn = document.querySelector("#checkedRevBtn");
    let sendBtn = document.querySelector("#sendBtn");
    let items = document.getElementsByName("items");


    //1.点击全选按钮全选
    checkedAllBtn.onclick = function () {
        items.forEach(function (it, index) {
            //复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。
            it.checked = true;
        })
    }
    //2.点击反选按钮反选
    checkedNoBtn.onclick = function () {
        items.forEach(function (it, index) {
            it.checked = false;
        })
    }

    //3.反选
    checkedRevBtn.onclick = function () {
        items.forEach(function (it, index) {
            //1.简便写法
            it.checked = !it.checked;
            //2.下面是常规的写法
            /* if (it.checked) {
              it.checked = false;
            } else {
              it.checked = true;
            } */
        })
    }

    //4.提交按钮
    sendBtn.onclick = function () {
        items.forEach(function (it, index) {
            if (it.checked) {
                alert(it.value);
            }
        })
    }

    /* 5.点击上面多选盒子全选或者反选,
         5.1 当点击上面的多选时，下面要跟随上面的状态
         5.2 当子元素有没有选中的，上面的需要也不选中,当子元素全部选中时，上面又要选中
     */
    //5.1 当点击上面的多选时，下面要跟随上面的状态
    checkedAllBox.onclick = function () {
        items.forEach(function (it, index) {

            //2.
            it.checked = checkedAllBox.checked;

            //3.
            /*  if (checkedAllBox.checked) {
               it.checked = checkedAllBox.checked;
             } else {
               it.checked = checkedAllBox.checked;
             } */
        })
    }

    //5.2 当子元素有没有选中的，上面的需要也不选中,当子元素全部选中时，上面又要选中
    //解决办法一：设置勾选的子元素数
    /*  window.onclick = function () {
       let num = 0;
       for (let i = 0; i < items.length; i++) {
         if (items[i].checked) {
           num++;
         }
       }
       console.log(num);
       //return;
       if (num == items.length) {
         checkedAllBox.checked = true;
       } else {
         checkedAllBox.checked = false;
       }
     } */
    //解决办法二：将子元素推进数组
    window.onclick = function () {
        debugger
        let arr = [];
        for (let i = 0; i < items.length; i++) {
            if (items[i].checked) {//将选上的全部放到数组里
                arr.push(items[i].checked);
            }
        }
        console.log(arr);
        if (arr.length != items.length) {//如果包含true的数组的长度不等于items的个数，那么选反选总按钮就不勾选
            checkedAllBox.checked = false;
        } else {
            checkedAllBox.checked = true;
        }
    }
</script>

</html>